<template>
    <section>
    <div>
        <el-form label-position="left" :model="search">
          <el-form-item  label="搜索" label-width="50px">
              <el-input
              v-model="search.keyword"
              style="width:200px"
              clearable
          placeholder="输入关键字搜索">
<el-button slot="append" icon="el-icon-search"  @click.native="queryCustomerList(1)"></el-button>
</el-input></el-form-item>
        </el-form>
          </div>
    <el-table
    size="small"
    ref="customerTabelRef"
    :header-cell-class-name="cellClass"
    :data="customerList"
    @selection-change="handelSelect"
    highlight-current-row>
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column show-overflow-tooltip  property="customerName" label="客户名称"></el-table-column>
        <el-table-column  show-overflow-tooltip property="channelName" label="来源渠道"></el-table-column>
        <el-table-column  show-overflow-tooltip property="mobile" label="手机号码"></el-table-column>
        <el-table-column  show-overflow-tooltip property="address" label="客户地址"></el-table-column>
    </el-table>
    <div>
        <el-button type="" :disabled="!hasPrevious" @click.native="handlePrevClick">上一页</el-button>
        <el-button type="" :disabled="!hasNext" @click.native="handleNextClick">下一页</el-button>
    </div>
    <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="close">取消</el-button>
        <el-button type="primary" size="mini" @click="handelOk">确定</el-button>
    </div>
    </section>
</template>
<script>
import customer from '@/api/crm/customerAPI'
export default {
  model: {
    prop: 'customer',
    event: 'confirm'
  },
  props: {
    customer: Object,
    visible: false,
    params: {type: Object,
      default: () => {
        return {}
      }}
  },
  watch: {
    params: {
      handler (val) {
        if (val && Object.keys(val).length > 0) {
          this.search = {...val}
        }
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      customerList: [],
      selectRow: {},
      search: {},
      pageSize: 3,
      totalRow: 0,
      hasNext: false,
      hasPrevious: false,
      pageNumber: 1
    }
  },
  mounted () {
    this.$keyBoard(this, 'queryCustomerList', 13, 1)
  },
  created () {
    this.queryCustomerList(1)
  },
  methods: {
    close () {
      this.$emit('update:visible', false)
    },
    handelOk () {
      if (this.selectRow && Object.keys(this.selectRow).length > 0) {
        this.$emit('confirm', this.selectRow || {})
      }
      this.close()
    },
    handelSelect (selection) {
      this.selectRow = selection[0]
      if (selection.length > 1) {
        this.$refs.customerTabelRef.clearSelection()
        this.$refs.customerTabelRef.toggleRowSelection(selection.pop())
      }
    },
    handlePrevClick () {
      const pageNumber = this.pageNumber - 1
      this.queryCustomerList(pageNumber <= 0 ? 1 : pageNumber)
    },
    handleNextClick () {
      this.queryCustomerList(this.pageNumber + 1)
    },
    queryCustomerList (pageNumber) {
      const params = this.search
      params.pageSize = this.pageSize
      params.pageNumber = pageNumber === undefined || pageNumber <= 0 ? 1 : pageNumber
      customer.getCustomerInfoListAPI(params).then(res => {
        this.customerList = res.data && res.data !== null ? res.data.list : []
        this.totalRow = res.data.totalRow
        this.hasNext = res.data.hasNext
        this.hasPrevious = res.data.hasPrevious
        this.pageNumber = res.data.pageNumber
      })
    },
    cellClass (row) {
      if (row.columnIndex === 0) {
        return 'disabledCheck'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
>>>.el-table .disabledCheck .cell .el-checkbox__inner{
    display: none !important;
}

// >>>.el-table .disabledCheck .cell::before{
//     content: '选择';
//     text-align: center;
//     line-height: 37px;
// }
</style>
